<template>
    <div class="input-inline" :class="{focus:input}">
        <div class="input-inline-textarea">
            <span v-html="value"></span>
            <textarea :rows="1" ref="textarea" v-model="text" type="text" @input="onInput" @blur="onBlur" @focus="onFocus($event)" @keydown.enter="onEnter($event)"></textarea>
        </div>
        <div class="input-inline-icon" v-show="!disabled" @click="doFocus">
            <svg-icon name="user-template-edit" />
        </div>
    </div>
</template>

<script>
export default {
    name: "TemplateInputInline",
    props: {
        value: { type: String, required: true },
        disabled: { type: Boolean, default: false }
    },
    data () {
        return {
            cache: "",
            input: false,
            text: '',
        };
    },
    watch: {
        value: {
            handler: function (v) {
                if (v && v != this.text) {
                    this.text = v;
                }
            }
        }
    },

    methods: {
        onInput (event) {
            this.$emit("input", this.text);
        },


        // 失去焦点
        onBlur (event) {
            this.$emit("blur", event);
            this.input = false;
            this.cache != this.value && this.$emit("change", this.value);
        },
        doFocus () {
            this.input = true;
            this.onFocus()
        },

        // 获得焦点
        onFocus (event) {
            if (!this.input) {
                return
            }
            this.cache = this.value;
            this.$nextTick(() => {
                this.getCursor();
                this.$refs.textarea.focus();
            })
            this.$emit("focus", event);
        },

        // 回车
        onEnter (event) {
            event && event.preventDefault && event.preventDefault();
            event && event.stopPropagation && event.stopPropagation();
            event.target.blur();
        },

        // 光标定位
        getCursor () {
            const put = this.$refs.textarea
            const len = put.value.length
            setSelectionRange(put, len, len)

            function setSelectionRange (input, selectionStart, selectionEnd) {
                if (input.setSelectionRange) {
                    input.focus()
                    input.setSelectionRange(selectionStart, selectionEnd)
                } else if (input.createTextRange) {
                    const range = input.createTextRange()
                    range.collapse(true)
                    range.moveEnd('character', selectionEnd)
                    range.moveStart('character', selectionStart)
                    range.select()
                }
            }
        }

    },
    created () {
        this.text = this.value;
    },
    mounted () {
    },
};
</script>
<style lang="scss" scoped>
// .input-inline-box {

// }
// .input-inline-textarea {
//     margin: 6px 17px;
// }
// textarea {
//     text-align: center;
//     line-height: 18px;
//     font-size: 14px;
//     border-radius: 4px;
//     // 换行
//     white-space: pre-wrap;
//     overflow-wrap: break-word;
// }

// &.focus {
//     flex: 1;
//     border-color: #f6b2cd;
//     outline: none;
//     background: #fff;
// }

.input-inline-textarea {
    position: relative;
    span,
    textarea {
        display: block;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        pointer-events: none;
        text-align: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-family: inherit;
        line-height: inherit;
        white-space: inherit;
        letter-spacing: inherit;
        max-height: 54px;
        min-height: 18px;
        min-width: 10px;
    }

    span {
        opacity: 1;
        line-clamp: 2;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        vertical-align: top;
    }

    textarea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        resize: none;
        overflow: hidden;
    }
}

.input-inline-icon {
    cursor: pointer;
    margin-left: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;

    svg {
        width: 16px;
        height: 16px;
        color: #999;
    }

    &:hover svg {
        color: #555;
    }
}

.input-inline {
    display: flex;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    border: 2px solid transparent;
    font-size: 14px;
    color: #000000;
    line-height: 20px;
    word-break: break-all;
    font-family: Roboto-Regular, Roboto;

    &.focus {
        border-color: #f6b2cd;
        background: #fff;
        // padding: 6px;
        .input-inline-icon {
            display: none;
        }
        .input-inline-textarea {
            width: 100%;
            span {
                opacity: 0;
            }
            textarea {
                opacity: 1;
                pointer-events: all;
            }
        }
    }
}
</style>
